<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
    <link rel="stylesheet" href="/home/static/layui/css/layui.css">
    <script src="/home/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/home/css/login.css">
</head>
<body>
    <main>
        {{--<section class="login">--}}
            <form class="layui-form login" action="" method="post">
                <h3 class='text-center '>欢迎进入考试系统</h3>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required maxlength="30"  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    {{csrf_field()}}
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" maxlength="30" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="captcha" maxlength="5" required lay-verify="required" placeholder="请输入验证码内容" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="captcha text-center">
                        <img src="{{captcha_src()}}" alt="">
                        <a  id="kanbuq">看不清?</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">记住我</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="remember_me" lay-skin="primary">
                    </div>
                </div>
                <div class="message text-center"></div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>

            </form>

        {{--</section>--}}
    </main>
    <script src="/home/static/jquery-3.2.1.min.js"></script>
    <script>
        layui.use('form', function(){
            var form = layui.form;

            //监听提交
            form.on('submit(formDemo)', function(data){
//                layer.msg(JSON.stringify(data.field));
//                return false;
            });
        });
        $(function() {
            //获取现有src的值
            var src = $('img').attr('src');
            //给kanbuq绑定点击事件
            $('#kanbuq').click(function() {
                //重新赋值SRC属性
                $('.captcha img').attr('src', src + '&_=' + Math.random());
            });

            //循环输出错误信息
            @if(count($errors) > 0)
            //定义错误提示的空字符串
            var warning = "";
            @foreach ($errors->all() as $error)
                warning += "{{$error}}</br>";
            @endforeach
            //弹出提示
            $('.message').html(warning)
//            alert(warning);
            @endif
        });
    </script>
</body>
</html>